<template>
  <div>
    <!--预约挂号-->
    <div>
      <div class="shouye">
        <div class="blue"></div>
        <h1>预约核酸</h1>
        <div class="cha">
          <div class="cha_input3">
            <el-row :gutter="20">
              <el-col :span="4">
                <el-date-picker
                  v-model="timeeee"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy年MM月dd日"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-col>
            </el-row>
          </div>

          <el-row :gutter="20">
            <el-col :span="4">
              <el-date-picker
                v-model="endtimeeee"
                type="date"
                placeholder="选择日期"
                format="yyyy年MM月dd日"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-col>
          </el-row>

          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getAllnucleicAcidList"
          ></el-button>
        </div>
      </div>
      <br />
    </div>

    <!--店铺全查-->
    <el-row :gutter="20">
      <el-table
        :data="nucleicAcidList"
        ref="multipleTable"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          prop="thePatient.name"
          label="患者姓名"
        ></el-table-column>
        <el-table-column
          prop="thePatient.hospitalNumber"
          label="就诊卡号"
        ></el-table-column>
        <el-table-column
          prop="thePatient.number"
          label="身份证号"
        ></el-table-column>
        <el-table-column
          prop="thePatient.phone"
          label="手机号码"
        ></el-table-column>
        <el-table-column
          prop="divisionType.divisionName"
          label="科室"
        ></el-table-column>
        <el-table-column prop="cost" label="检测费"></el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column prop="visitTime" label="就诊日期"></el-table-column>
        <el-table-column
          prop="waitingRecord.houzhenTime"
          label="就诊时间"
        ></el-table-column>
        <el-table-column prop="createTime" label="预约时间"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="s">
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="hesuanxiangqing(s.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      
      <div class="pagination">
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total" 
        >
        </el-pagination>
      </div>
        
      
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    //定义变量和初始值
    return {
      pageNum: 1,
      pageSize: 5,
      total: null,

      nucleicAcidList: [],
      createtime: "",
      timeeee: "",
      endtimeeee: ""
    };
  },
  created() {
    //页面渲染之前执行，一般调用methods定义的方法
    // this.getList();
    // this.getOneSubject(); //初始化省
    this.getAllnucleicAcidList();
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllnucleicAcidList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getAllnucleicAcidList();
    },
    getAllnucleicAcidList() {
      this.$axios
        .post("/user/user/user/getAllnucleicAcid", {
          pageSize: this.pageSize,
          pageNum: this.pageNum,
          createTime: this.timeeee,
          createTime1: this.endtimeeee
        })
        .then(res => {
          if (res.data.code == 20000) {
            this.nucleicAcidList = res.data.data.pageResult.content;
            this.total = res.data.data.pageResult.totalSize;
            this.pageNum = res.data.data.pageResult.pageNum;
            this.pageSize = res.data.data.pageResult.pageSize;
          }
        })
        .catch(res => {
          console.log("出错了");
          console.log(res);
        });
    },
    hesuanxiangqing(id) {
      //传id
      localStorage.setItem("id", JSON.stringify(id));

      // alert(id)
      this.$router.push("/hesuanxiangqing?");
    }
  }
};
</script>

<style>
.shouye {
  margin-top: 10px;
}
.blue {
  width: 36px;
  height: 12px;
  background-color: blue;
  float: left;
  margin-left: 20px;
  margin-top: 6px;
  border-radius: 50px;
}
.shouye h1 {
  float: left;
  margin-top: -4px;
  margin-left: 10px;
}
.cha {
  margin-left: 200px;
  display: flex;
}
.cha_input3 {
  margin-left: 34px;
}
.el-input--suffix .el-input__inner {
  width: 200px;
}
.pagination .el-input--suffix .el-input__inner  {
  width:106px!important;
}
</style>
